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HTML <iframe> width Attribute

Example
An <iframe> with a specified height and width of 200 pixels:

<iframe src="/default.asp" width="200" height="200"></iframe>
Definition and Usage
The width attribute specifies the width of an <iframe>, in pixels.

Browser Support
Attribute					
width	Yes	Yes	Yes	Yes	Yes
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the width could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.

Syntax
<iframe width="pixels">
Attribute Values
Value	Description
pixels	The width in pixels (like "100px" or just "100")
 


















HTML <iframe> Tag

Example
An inline frame is marked up as follows:

<iframe src="https://www.w3schools.com"></iframe>
Definition and Usage
The <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Browser Support
Element					
<iframe>	Yes	Yes	Yes	Yes	Yes
Tips and Notes
Tip: To deal with browsers that do not support <iframe>, add a text between the opening <iframe> tag and the closing </iframe> tag.

Tip: Use CSS to style the <iframe> (even to include scrollbars).

Differences Between HTML 4.01 and HTML5
HTML5 has added some new attributes, and several HTML 4.01 attributes are removed from HTML5.

Differences Between HTML and XHTML
In XHTML, the name attribute is deprecated, and will be removed. Use the global id attribute instead.

Attributes
Attribute	Value	Description
align	left
right
top
middle
bottom	Not supported in HTML5.
Specifies the alignment of an <iframe> according to surrounding elements
frameborder	1
0	Not supported in HTML5.
Specifies whether or not to display a border around an <iframe>
height	pixels	Specifies the height of an <iframe>
longdesc	URL	Not supported in HTML5.
Specifies a page that contains a long description of the content of an <iframe>
marginheight	pixels	Not supported in HTML5.
Specifies the top and bottom margins of the content of an <iframe>
marginwidth	pixels	Not supported in HTML5.
Specifies the left and right margins of the content of an <iframe>
name	text	Specifies the name of an <iframe>
sandbox	allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation	Enables an extra set of restrictions for the content in an <iframe>
scrolling	yes
no
auto	Not supported in HTML5.
Specifies whether or not to display scrollbars in an <iframe>
src	URL	Specifies the address of the document to embed in the <iframe>
srcdoc	HTML_code	Specifies the HTML content of the page to show in the <iframe>
width	pixels	Specifies the width of an <iframe>
Global Attributes
The <iframe> tag also supports the Global Attributes in HTML.

Event Attributes
The <iframe> tag also supports the Event Attributes in HTML.

Related Pages
HTML tutorial: HTML Iframes

HTML DOM reference: IFrame Object

Default CSS Settings
Most browsers will display the <iframe> element with the following default values:

iframe:focus { 
  outline: none;
}

iframe[seamless] { 
  display: block;
}
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HTML <iframe> width Attribute

Example
An <iframe> with a specified height and width of 200 pixels:

<iframe src="/default.asp" width="200" height="200"></iframe>
Definition and Usage
The width attribute specifies the width of an <iframe>, in pixels.

Browser Support
Attribute					
width	Yes	Yes	Yes	Yes	Yes
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the width could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.

Syntax
<iframe width="pixels">
Attribute Values
Value	Description
pixels	The width in pixels (like "100px" or just "100")
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HTML <iframe> align Attribute

Example
A right-aligned <iframe>:

<iframe src="/default.asp" width="200" height="200" align="right">
</iframe>
Definition and Usage
The align attribute specifies the alignment of an <iframe> according to the surrounding element.

The <iframe> element is an inline element (it does not insert a new line on a page), meaning that text and other elements can wrap around it. Therefore, it can be useful to specify the alignment of the <iframe> according to surrounding elements.

Browser Support
Attribute					
align	Yes	Yes	Yes	Yes	Yes
The align attribute is deprecated, but still supported in all major browsers.

Compatibility Notes
The align attribute of <iframe> is not supported in HTML5. Use CSS instead.

CSS syntax: <iframe style="float:right">

CSS Example: Float an iframe to the right

In our CSS tutorial you can find more details about the float property.

Syntax
<iframe align="left|right|middle|top|bottom">
Attribute Values
Value	Description
left	Align the iframe to the left
right	Align the iframe to the right
middle	Align the iframe in the middle
top	Align the iframe at the top
bottom	Align the iframe at the bottom
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HTML <iframe> name Attribute

Example
An <iframe> that act as a target for a link:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a>
Definition and Usage
The name attribute specifies a name for the <iframe>.

This name attribute can be used to reference the element in a JavaScript, or as the value of the target attribute of an <a> or <form> element, or the formtarget attribute of an <input> or <button> element.

Browser Support
Attribute					
name	Yes	Yes	Yes	Yes	Yes
Differences Between HTML 4.01 and HTML5
NONE.

Differences Between HTML 4.01 and XHTML
In XHTML, the name attribute is deprecated, and will be removed. Use the id attribute instead.

Syntax
<iframe name="name">
Attribute Values
Value	Description
name	Specifies a name for the <iframe>
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HTML <iframe> sandbox Attribute

Example
An <iframe> with extra restrictions:

<iframe src="demo_iframe_sandbox.htm" sandbox></iframe>
 
More "Try it Yourself" examples below.

Definition and Usage
The sandbox attribute enables an extra set of restrictions for the content in the iframe.

When the sandbox attribute is present, and it will:

treat the content as being from a unique origin
block form submission
block script execution
disable APIs
prevent links from targeting other browsing contexts
prevent content from using plugins (through <embed>, <object>, <applet>, or other)
prevent the content to navigate its top-level browsing context
block automatically triggered features (such as automatically playing a video or automatically focusing a form control)
The value of the sandbox attribute can either be just sandbox (then all restrictions are applied), or a space-separated list of pre-defined values that will REMOVE the particular restrictions.

Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.

Attribute					
sandbox	4.0	10.0	17.0	5.0	15.0
Differences Between HTML 4.01 and HTML5
The sandbox attribute is new in HTML5.


Syntax
<iframe sandbox="value">
Attribute Values
Value	Description
(no value)	Applies all restrictions
allow-forms	Re-enables form submission
allow-pointer-lock	Re-enables APIs
allow-popups	Re-enables popups
allow-same-origin	Allows the iframe content to be treated as being from the same origin
allow-scripts	Re-enables scripts
allow-top-navigation	Allows the iframe content to navigate its top-level browsing context
More Examples
Example
An <iframe> sandbox allowing form submission:

<iframe src="demo_iframe_sandbox_form.htm" sandbox="allow-forms"></iframe>

Example
An <iframe> sandbox allowing scripts and access to server content:

<iframe src="demo_iframe_sandbox_origin.htm" sandbox="allow-same-origin allow-scripts"></iframe>
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HTML <iframe> frameborder Attribute

Example
An <iframe> with no borders:

<iframe src="/default.asp" width="200" height="200" frameborder="0">
</iframe>
Definition and Usage
The <iframe> frameborder attribute is not supported in HTML5. Use CSS instead.

The frameborder attribute specifies whether or not to display a border around an <iframe>.

Tip: It may be better to NOT specify a frameborder, and use CSS to apply borders instead.

CSS Example: iframe borders

Browser Support
Attribute					
frameborder	Yes	Yes	Yes	Yes	Yes
The frameborder attribute is deprecated, but still supported in all major browsers.

Syntax
<iframe frameborder="1|0">
Attribute Values
Value	Description
1	Default. Border on
0	Border off
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HTML <iframe> height Attribute

Example
An <iframe> with a specified height and width of 200 pixels:

<iframe src="/default.asp" width="200" height="200">
</iframe>
Definition and Usage
The height attribute specifies the height of an <iframe>, in pixels.

Browser Support
Attribute					
height	Yes	Yes	Yes	Yes	Yes
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the height could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.

Syntax
<iframe height="pixels">
Attribute Values
Value	Description
pixels	The height of the inline frame in pixels (e.g. height="100")
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HTML <iframe> src Attribute

Example
An <iframe> in its simplest use:

<iframe src="/default.asp"></iframe>
Definition and Usage
The src attribute specifies the address of the document to embed in the <iframe>.

Browser Support
Attribute					
src	Yes	Yes	Yes	Yes	Yes
Differences Between HTML 4.01 and HTML5
NONE.

Syntax
<iframe src="URL">
Attribute Values
Value	Description
URL	Specifies the URL of the document to embed in the iframe.
Possible values:

An absolute URL - points to another web site (like src="http://www.example.com/default.htm")
A relative URL - points to a file within a web site (like src="default.htm")
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HTML <iframe> Tag

Example
An inline frame is marked up as follows:

<iframe src="https://www.w3schools.com"></iframe>
Definition and Usage
The <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Browser Support
Element					
<iframe>	Yes	Yes	Yes	Yes	Yes
Tips and Notes
Tip: To deal with browsers that do not support <iframe>, add a text between the opening <iframe> tag and the closing </iframe> tag.

Tip: Use CSS to style the <iframe> (even to include scrollbars).

Differences Between HTML 4.01 and HTML5
HTML5 has added some new attributes, and several HTML 4.01 attributes are removed from HTML5.

Differences Between HTML and XHTML
In XHTML, the name attribute is deprecated, and will be removed. Use the global id attribute instead.


Attributes
Attribute	Value	Description
align	left
right
top
middle
bottom	Not supported in HTML5.
Specifies the alignment of an <iframe> according to surrounding elements
frameborder	1
0	Not supported in HTML5.
Specifies whether or not to display a border around an <iframe>
height	pixels	Specifies the height of an <iframe>
longdesc	URL	Not supported in HTML5.
Specifies a page that contains a long description of the content of an <iframe>
marginheight	pixels	Not supported in HTML5.
Specifies the top and bottom margins of the content of an <iframe>
marginwidth	pixels	Not supported in HTML5.
Specifies the left and right margins of the content of an <iframe>
name	text	Specifies the name of an <iframe>
sandbox	allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation	Enables an extra set of restrictions for the content in an <iframe>
scrolling	yes
no
auto	Not supported in HTML5.
Specifies whether or not to display scrollbars in an <iframe>
src	URL	Specifies the address of the document to embed in the <iframe>
srcdoc	HTML_code	Specifies the HTML content of the page to show in the <iframe>
width	pixels	Specifies the width of an <iframe>
Global Attributes
The <iframe> tag also supports the Global Attributes in HTML.

Event Attributes
The <iframe> tag also supports the Event Attributes in HTML.

Related Pages
HTML tutorial: HTML Iframes

HTML DOM reference: IFrame Object

Default CSS Settings
Most browsers will display the <iframe> element with the following default values:

iframe:focus { 
  outline: none;
}

iframe[seamless] { 
  display: block;
}
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HTML Iframes
An iframe is used to display a web page within a web page.


Iframe Syntax
An HTML iframe is defined with the <iframe> tag:

<iframe src="URL"></iframe>
The src attribute specifies the URL (web address) of the inline frame page.

Iframe - Set Height and Width
Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

Example
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
The height and width can also be specified in percent:

Example
<iframe src="demo_iframe.htm" height="100%" width="100%"></iframe>
Or you can use CSS to set the height and width of the iframe:

Example
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>
Iframe - Remove the Border
By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

Example
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
With CSS, you can also change the size, style and color of the iframe's border:

Example
<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>
 
Iframe - Target for a Link
An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

Example
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
HTML Exercises
Test Yourself With Exercises
Exercise:
Create an iframe with a URL address that goes to https://www.w3schools.com.

<iframe 
="https://www.w3schools.com"></iframe>

Start the Exercise

HTML iframe Tag
Tag	Description
<iframe>	Defines an inline frame
For a complete list of all available HTML tags, visit our HTML Tag Reference.
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video player html5 mjarreb

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="https://ia600203.us.archive.org/6/items/anis11/22822_427574820625613_938278715_n.jpg"
    data-setup='{}'>
  <source src="https://archive.org/download/fatawa.elnas.3adawy.14.4.2010/fatawa.elnas.adawy.14.4.2010.ogv" type="video/ogg"></source>
  
  
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>





<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="https://ia600203.us.archive.org/6/items/anis11/22822_427574820625613_938278715_n.jpg"
    data-setup='{}'>
  
  
  <source src="https://archive.org/download/vid20190826192854586/VID_20190826_192854_586.ogv" type="video/ogg"></source>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>











</body>
</html>
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